<script setup lang="ts">
import type { MemberUserApi } from '#/api/member/user';
import type { PayWalletApi } from '#/api/pay/wallet/balance';

import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';

import { Button, Card, message, TabPane, Tabs } from 'ant-design-vue';

import { getUser } from '#/api/member/user';
import { getWallet } from '#/api/pay/wallet/balance';
import { $t } from '#/locales';

import Form from '../modules/form.vue';
import AccountInfo from './modules/account-info.vue';
import AddressList from './modules/address-list.vue';
import BalanceList from './modules/balance-list.vue';
import BasicInfo from './modules/basic-info.vue';
import ExperienceRecordList from './modules/experience-record-list.vue';
import PointList from './modules/point-list.vue';
import SignList from './modules/sign-list.vue';

const route = useRoute();
const { closeCurrentTab, refreshTab } = useTabs();

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const userId = Number(route.query.id);
const user = ref<MemberUserApi.User>();
const wallet = ref<PayWalletApi.Wallet>();

/** 获取会员详情 */
async function getUserDetail() {
  if (!userId) {
    message.error($t('views.member.user.detail.errorParams'));
    await closeCurrentTab();
    return;
  }
  user.value = await getUser(userId);
  wallet.value = (await getWallet({ userId })) || {
    balance: 0,
    totalExpense: 0,
    totalRecharge: 0,
  };
}

/** 编辑会员 */
function handleEdit() {
  formModalApi.setData(user.value).open();
}

/** 初始化 */
onMounted(async () => {
  await getUserDetail();
});
</script>
<template>
  <Page auto-content-height>
    <FormModal @success="refreshTab" />
    <div class="flex">
      <BasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
        <template #title> 
          {{ $t('views.member.user.detail.baseInfo') }} 
        </template>
        <template #extra>
          <Button type="primary" @click="handleEdit">
            {{ $t('common.edit') }}
          </Button>
        </template>
      </BasicInfo>
      <AccountInfo
        v-if="user && wallet"
        class="ml-4 w-2/5"
        :user="user"
        :wallet="wallet"
      >
        <template #title>
          {{ $t('views.member.user.detail.accountInfo') }}
        </template>
      </AccountInfo>
    </div>
    <div class="mt-4">
      <Card :title="$t('views.member.user.detail.accountDetail')">
        <Tabs>
          <TabPane :tab="$t('views.member.user.detail.point')" key="PointList">
            <PointList class="h-full" :user-id="userId" />
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.signin')" key="SignList">
            <SignList class="h-full" :user-id="userId" />
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.experience')" key="ExperienceRecordList">
            <ExperienceRecordList class="h-full" :user-id="userId" />
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.balance')" key="BalanceList">
            <BalanceList class="h-full" :wallet-id="wallet?.id" />
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.receiveAddress')" key="AddressList">
            <AddressList class="h-full" :user-id="userId" />
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.order')" key="OrderList">
            <!-- Todo: 商城模块 -->
            <div class="h-full">
              <h1>{{ $t('views.member.user.detail.order') }}</h1>
            </div>
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.aftersale')" key="AfterSaleList">
            <!-- Todo: 商城模块 -->
            <div class="h-full">
              <h1>{{$t('views.member.user.detail.aftersale')}}</h1>
            </div>
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.favorite')" key="FavoriteList">
            <!-- Todo: 商城模块 -->
            <div class="h-full">
              <h1>{{ $t('views.member.user.detail.favorite') }}</h1>
            </div>
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.coupon')" key="CouponList">
            <!-- Todo: 商城模块 -->
            <div class="h-full">
              <h1>{{ $t('views.member.user.detail.coupon') }}</h1>
            </div>
          </TabPane>
          <TabPane :tab="$t('views.member.user.detail.brokerage')" key="BrokerageList">
            <!-- Todo: 商城模块 -->
            <div class="h-full">
              <h1>{{ $t('views.member.user.detail.brokerage') }}</h1>
            </div>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  </Page>
</template>
